<template>
  <div class="content">
    <div class="money">
      支付金额：
      <span>{{money}}</span>
    </div>
    <div class="buyHint">
      <div>
        <img
          src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/weixin.jpg"
          alt
        />
        <span>微信支付</span>
      </div>
      <div class="gou">
        <p></p>
      </div>
    </div>
    <button class="buyBtn" @click="buyBtn">支付</button>
  </div>
</template>

<script>
import { CREATE_MARKETING_PAY_ORDER, FIND_USER_OPEN_ID } from '@/api'
import { Base64 } from 'js-base64'

export default {
  components: {},
  data () {
    return {
      money: '',
      form: {}
    }
  },
  created () {},
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  onShow () {
    this.getwxCode()
  },
  onUnload () {
    this.$cookie.remove('buyInfo')
  },
  methods: {
    getwxCode () {
      const vm = this
      wx.login({
        timeout: 6000,
        success: function (res) {
          vm._getWxCode(res.code)
        },
        fail: function (err) {
          console.error(err)
        }
      })
    },
    _getWxCode (code) {
      const vm = this
      let appId = vm.$store.state.appId
      let appSecret = Base64.decode(vm.$store.state.appSecret)
      FIND_USER_OPEN_ID(appId, appSecret, code)
        .then(r => {
          if (r.data.code === '0') {
            vm.init(r.data.data)
          } else {
            this.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    buyBtn () {
      CREATE_MARKETING_PAY_ORDER(this.form)
        .then(r => {
          if (r.data.code === '0') {
            if (r.data.data && r.data.data.data) {
              // console.log('data:image/png;base64,' + r.data.data.data)
              let payInfo = Base64.decode(r.data.data.data)
              this._callWechatPay(JSON.parse(payInfo))
            }
          } else if (r.data.message === '未找到云账户信息') {
            this.$alert(
              '您暂未开通云账户，请到爱卡卡开店宝pc端管理系统登录开通。详情请咨询400-888-5115'
            ).then(r => {
              this.$router.go(-1)
            })
          } else {
            this.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    _callWechatPay (payInfo) {
      const vm = this

      console.log(payInfo)

      wx.requestPayment({
        ...payInfo,
        success: function (res) {
          vm.$alert('支付成功', '').then(() => {
            vm.$router.go(-1)
          })
        },
        fail: function (err) {
          console.log(err)
          if (err.errMsg === 'requestPayment:fail cancel') {
          } else {
            vm.$toast('支付失败')
          }
        }
      })
    },
    init (openId) {
      // this.money = this.$root.$mp.query.money
      let data = JSON.parse(this.$cookie.get('buyInfo'))
      this.money = data.amount
      this.form = {
        marketingType: data.marketingType,
        payType: 'PERM',
        relateMan: this.account.shopId,
        phone: this.account.cellphone,
        providerId: this.account.providerId,
        shopAppId: 23,
        shopId: this.account.shopId,
        storeIdentityEnum: 'SHOP',
        openId: openId,
        payMerId: this.$store.state.payMerId,
        payMethodEnum: 'MINI', // 之前是改了的WECHAT
        paySourceEnum: 'H5' // 之前是改了的MINI
      }
    }
  }
}
</script>

<style lang="scss">
.content {
  .money {
    text-align: right;
    font-size: 14px;
    color: #000;
    margin: 20px 40px;
    span {
      color: #e83330;
    }
  }
  .buyHint {
    padding: 15px 0;
    border-bottom: 3px solid #cecdcb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    div {
      margin-left: 40px;
      display: flex;
      align-items: center;
      img {
        width: 30px;
        height: 30px;
        border-radius: 50px;
      }
      span {
        font-size: 14px;
        font-weight: 500px;
        color: #000;
        margin-left: 10px;
      }
    }
    .gou {
      margin-right: 40px;
      background: #fe2725;
      border-radius: 50px;
      width: 16px;
      height: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        margin-bottom: 3px;
        width: 3px;
        height: 6px;
        border-right: 1px solid #ffffff;
        border-bottom: 1px solid #ffffff;
        transform: rotate(40deg);
      }
    }
  }

  .buyBtn {
    width: 300px;
    height: 40px;
    border-radius: 4px;
    background: #fe2725;
    color: #fff;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    line-height: 40px;
  }
}
</style>
